<template>
  <el-tree
    draggable
    ref="tree"
    :node-key="nodeKey"
    class="menu-tree"
    auto-expand-parent
    v-bind="$attrs"
    :data="data"
    accordion
    :allow-drop="allowDrop"
    :default-expand-all="false"
    :expand-on-click-node="false"
    :render-content="renderContent"
    :default-expanded-keys="defautExpandedKeys"
    @node-drop="sort"
    @node-click="nodeClick"
    @node-expand="nodeExpand"
  >
    <!-- @node-collapse="nodeCollapse" -->
    <!-- :allow-drag="allowDrag" -->
    <!-- @node-drag-start="handleDragStart"
    @node-drag-enter="handleDragEnter"
    @node-drag-leave="handleDragLeave"
    @node-drag-over="handleDragOver"
    @node-drag-end="handleDragEnd"
    @node-drop="handleDrop"-->
  </el-tree>
</template>

<script>
export default {
  name: 'MenuTree',
  components: {},
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    expendedKeys: {
      type: Array,
      default: () => {
        return []
      }
    },
    nodeKey: {
      type: String,
      default: 'menuId'
    }
  },
  data () {
    return {}
  },
  computed: {
    defautExpandedKeys: {
      get () {
        return this.expendedKeys
      },
      set (val) {
        this.$emit('update:expendedKeys', val)
      }
    }
  },
  watch: {
    // defautExpandedKeys (val) {
    //   console.log(val)
    // }
  },
  created () {
    this.$nextTick(() => {
      this.proxy()
    })
  },
  methods: {
    // handleDragStart (node, ev) {
    //   console.log('drag start', node)
    // },
    // handleDragEnter (draggingNode, dropNode, ev) {
    //   console.log('tree drag enter: ', dropNode.label)
    // },
    // handleDragLeave (draggingNode, dropNode, ev) {
    //   console.log('tree drag leave: ', dropNode.label)
    // },
    // handleDragOver (draggingNode, dropNode, ev) {
    //   console.log('tree drag over: ', dropNode.label)
    // },
    // handleDragEnd (draggingNode, dropNode, dropType, ev) {
    //   console.log('tree drag end: ', dropNode && dropNode.label, dropType)
    // },
    sort (draggingNode, dropNode, dropType, ev) {
      // 同级排序
      let obj = {
        pId: '', // 排序菜单的父级id
        children: [] // 排序后的id数组
      }
      obj.pId = dropNode.data.pId
      for (let item of dropNode.parent.childNodes) {
        obj.children.push(item.data.menuId)
      }
      this.$emit('sort', obj, dropNode.parent.data)
      // this.updateOrderMe(obj)
    },
    renderContent (h, { node, data, store }) {
      const controlBtn = [
        <a
          href="javascript:;"
          title="删除菜单"
          class="control-btn text-error el-icon-close"
          on-click={e => this.typeClick('remove', node, data, e)}
        />,
        <a
          href="javascript:;"
          title="编辑菜单"
          class="control-btn text-success el-icon-edit"
          on-click={e => this.typeClick('edit', node, data, e)}
        />
      ]
      const addBtn = (
        <a
          href="javascript:;"
          title="添加子菜单"
          class="control-btn text-primary el-icon-plus"
          on-click={e => this.typeClick('add', node, data, e)}
        />
      )
      if (node.level < 4) {
        controlBtn.unshift(addBtn)
      }
      return (
        <span class="custom-tree-node flex-one df-center">
          <span title={data.menuName} class="tree-label flex-one ell">
            {data.menuName}
          </span>
          {controlBtn}
          {this.$scopedSlots.btn({ node, data, store })}
        </span>
      )
    },
    allowDrop (draggingNode, dropNode, type) {
      if (draggingNode.data.level === dropNode.data.level) {
        // parentId是父节点id
        if (draggingNode.data.pId === dropNode.data.pId) {
          return type === 'prev' || type === 'next'
        }
      } else {
        // 不同级进行处理
        return false
      }
    },
    nodeClick (data, node) {
      this.$emit('node-click', { data, node })
    },
    typeClick (type, node, data, e) {
      this.$emit(type, { node, data, type })
      if (e) {
        e.stopPropagation()
      }
    },
    allowDrag (draggingNode) {
      return true
    },
    nodeExpand (data) {
      // if (this.defautExpandedKeys.indexOf(data.id) === -1) {
      //   this.defautExpandedKeys.push(data.id)
      // }
      this.defautExpandedKeys = [data.menuId]
    },
    nodeCollapse (data) {
      let index = this.defautExpandedKeys.indexOf(data.menuId)
      if (index > -1) {
        this.defautExpandedKeys.splice(index, 1)
      }
    },
    proxy () {
      let array = [
        'getCurrentKey',
        'getCurrentNode',
        'setCurrentKey',
        'setCurrentNode'
      ]
      let vm = this
      array.forEach(key => {
        Object.defineProperty(this, key, {
          get () {
            return this.$refs.tree[key]
          }
        })
      })
    }
  }
}
</script>
<style lang="scss">
@import "~styles/variables";
.menu-tree .el-tree-node__content {
  line-height: rem(40px);
  height: rem(40px);
}
.custom-tree-node {
  .control-btn {
    display: inline-block;
    line-height: rem(40px);
    height: rem(40px);
    width: rem(40px);
    text-align: center;
    font-size: rem(16px);
    transition: all 0.3s;
    &:hover {
      transform: rotate(180deg);
    }
  }
}
.tree-label {
  // min-width: 300px;
  display: inline-block;
}

.menu-tree {
  // border: 1px solid #dcdfe6;
  border-bottom: none;

  .el-tree-node__content {
    height: auto;
    border-bottom: 1px solid #dcdfe6;
    align-items: baseline;
  }
  .el-tree-node__children {
    // 1
    .el-tree-node__children {
      // 2
      .el-tree-node {
        border-bottom: 1px solid #dcdfe6;
      }
    }
  }
}
</style>
